import React, { useEffect, useState } from 'react'
import { useSearchParams, useNavigate } from 'react-router-dom'
import sendHttp from '../../http/sendHttp'
import { NavBar } from 'react-vant';
import { ArrowLeft } from '@react-vant/icons';
import './ComOne.scss'

export default function City() {
    const navigate = useNavigate()
    const [search] = useSearchParams()
    const cityId = search.get('id')
    const [city, setCity] = useState({})
    const [iptValue, setIptValue] = useState('')
    const [searchList, setSearchList] = useState([])
    useEffect(() => {
        sendHttp('get', `v1/cities/${cityId}`)
            .then((res) => {
                // console.log(res);
                setCity(res.data)
            })
    }, [])

    const submit = () => {
        sendHttp('get', '/v1/pois', { city_id: cityId, keyword: iptValue })
            .then((res) => {
                console.log(res);
                setSearchList(res.data)
            })
    }

    return (
        <div>
            <NavBar
                title={city.name}
                leftText={<ArrowLeft onClick={() => navigate('/')} />}
                rightText={<div onClick={() => navigate('/')}>切换城市</div>}
            />
            <div className="search">
                <div className="ipt">
                    <input type="text" placeholder='请输入学校，商务楼，地址' value={iptValue} onChange={
                        (e) => setIptValue(e.target.value)
                    } />
                </div>
                <div className="btn" onClick={() => {
                    submit()
                }}>提交</div>
            </div>
            <div className="search-item">
                {searchList.length !== 0 &&
                    <ul>
                        {searchList.map((item,index) => {
                            return (
                                <li key={index} onClick={()=>navigate(`/home?geohash=${item.geohash}`)}>
                                    <div className="name">{item.name}</div>
                                    <div className="address">{item.address}</div>
                                </li>
                            )
                        })}
                    </ul>
                }
            </div>
        </div>
    )
}
